<template>
  <div id="xm-index" class="xm-index">
    <nav is="nav-componnents" class="index-nav" :nav="nav">
      <a class="right-content index-nav-right" v-if="!hasLogin" href="" slot="right">登录</a>
      <a class="right-content index-nav-right avatar" v-if="hasLogin" href="" slot="right">
        <img class="avatar-img" :src="userinfo.avatar">
      </a>
    </nav>
    <div class="xm-container">
      <div class="content-wrapper">
        <div class="carousel-wrapper">
          sdfsdsdfs第三方
        </div>
        <!-- 豆腐块入口 -->
        <beancurd-cube class="entry-wrapper" :data="entry"></beancurd-cube>
        <!-- 推荐 -->
        <recommend-component class="recommend-wrapper" :data="recommend"></recommend-component>
      </div>
      <a class="more" href="">查看更多</a>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import nav from 'components/nav/Nav';
  import beancurdCube from 'components/beancurdCube/BeancurdCube';
  import recommendComponent from 'components/recommend/Recommend';
  /*
    nav配置信息
  */
  const navConfig = {
    left: {
      isShow: false,
      type: 'IMG'
    },
    middle: {
      isShow: true,
      type: 'TEXT',
      content: '熊猫天下'
    },
    right: {
      isShow: true,
      type: 'TEXT',
      content: '登录'
    }
  };
  /*
    entry 配置信息
  */
  const entryConf = [
    [
      {
        name: '班车',
        url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=99',
        icon: 'imgs/index/icon_home_bus_100x100px.png'
      },
      {
        name: '商城',
        url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php',
        icon: '../imgs/index/icon_home_mall_100x100px.png'
      },
      {
        name: '兑换',
        url: 'http://piao.pandauu.com/index1.php#/convert',
        icon: '../imgs/index/icon_home_exchange_100x100px.png'
      }
    ],
    [
      {
        name: '我的 票/订单',
        url: 'http://piao.pandauu.com/single/piao_1_4/ticket/selOrder.php',
        icon: '../imgs/index/icon_home_myticket_100x100px.png'
      },
      {
        name: '帮助',
        url: 'http://piao.pandauu.com/single/piao_1_4/help/help.html',
        icon: '../imgs/index/icon_home_help_100x100px.png'
      },
      {
        name: '',
        url: '',
        icon: ''
      }
    ]
  ];
  /*
    recommend 配置信息
  */
  const recommendConf = [
    {
      title: '城市 + 玩法',
      data: [
        {
          name: '普吉',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?area_id[]=1',
          icon: ''
        },
        {
          name: '清迈',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?area_id[]=3',
          icon: ''
        },
        {
          name: '巴厘岛',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?area_id[]=5',
          icon: ''
        },
        {
          name: '吴哥',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?area_id[]=6',
          icon: ''
        },
        {
          name: '曼谷',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?area_id[]=7',
          icon: ''
        },
        {
          name: '沙巴',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?area_id[]=4',
          icon: ''
        },
        {
          name: '当地游',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=1',
          icon: ''
        },
        {
          name: '门票',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=5',
          icon: ''
        },
        {
          name: '接送机',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=6',
          icon: ''
        },
        {
          name: '特线',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=9',
          icon: ''
        },
        {
          name: '包车',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=11',
          icon: ''
        },
        {
          name: '班车',
          url: 'http://piao.pandauu.com/single/piao_1_4/public/nproducts.php?cid[]=99',
          icon: ''
        }
      ]
    }
  ];
  export default {
    name: 'index',
    components: {
      'nav-componnents': nav,
      'beancurd-cube': beancurdCube,
      'recommend-component': recommendComponent
    },
    data () {
      return {
        nav: navConfig,
        userinfo: null,
        entry: entryConf,
        recommend: recommendConf
      };
    },
    created () {
      let _ajax = this.$http;
      let apiConf = this.sConf;
      let code = this.code;
      _ajax.get(apiConf.apiRoot + apiConf.apiPre.one + apiConf.api.userinfo)
      .then(
        (res) => {
          console.log(res);
          let data = res.body;
          if (data.error === code.ERR_OK) {
            this.userinfo = data.data;
          }
        },
        (err) => {
          console.log('err -> ', err);
        }
      );
    },
    computed: {
      hasLogin () {
        /*
          默认为未登录
        */
        return !!this.userinfo;
      }
    }
  };
</script>

<style lang="less" rel="stylesheet/less">
  .xm-index{
    height: 100%;
    padding-top: 40px;
    color: #4a4a4a;
    .xm-container{
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .index-nav{
      .index-nav-right{
        color: #191919;
        vertical-align: middle;
      }
      .avatar{
        display: inline-block;
        .avatar-img{
          width: 30px;
          height: 30px;
          border-radius: 50%;
          vertical-align: middle;
        }
      }
    }
    .content-wrapper{
      min-height: 100%;
      padding-bottom: 56px;
      background-color: #efefef;
    }
    .carousel-wrapper{
      height: 200px;
    }
    .more{
      display: block;
      width: 80%;
      padding: 12px 0;
      margin: -46px auto 10px;
      text-align: center;
      font-size: 12px;
      color: #a0a0a0;
      background-color: #ccc;
    }
  }
</style>
